<template>
    <!-- 助教信息卡片（纵向卡片样式） -->
    <view class="assistant-card" @click.stop="onCardTap">
        <custom-checkbox class="checkbox" v-if="isshowCheck" @change="handleSelect" :value="checked"></custom-checkbox>
        <!-- 背景头像图 -->
        <image class="cover" :src="avatarFinal" mode="aspectFill" />

        <!-- 在线状态角标 -->
        <view class="status-badge">
            <view class="dot" :class="{ [getStatusClass]: true }" />
            <text>{{ statusText }}</text>
        </view>
        <view class="info-wrap">
            <view class="row meta">
                <text class="meta-item">{{ assistantInfos?.age ?? 22 }}<text class="unit">岁</text>｜{{
                    assistantInfos?.height ?? "170"
                    }}<text class="unit">cm</text></text>
                <view class="meta-right" v-if="
                    assistantInfos?.distance !== undefined &&
                    assistantInfos?.distance !== null
                ">
                    <text class="loc-dot"></text>
                    <text class="distance">{{ distanceLabel }}</text>
                </view>
            </view>

            <view class="row bottom">
                <view class="name-wrap">
                    <text class="name ellipsis">{{ assistantInfos?.name }}</text>
                    <view class="tag" :class="[gender]"></view>
                </view>
                <view class="order-btn" :class="[getTextStatusClass]" @click.stop="onOrderTap">
                    <text>{{ buttonText }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
// 助教信息卡片
// - 交互：点击卡片、点击下单按钮（分别抛出 click-card、click-order、select-change 事件）

import { computed, ref, onMounted } from "vue";
import type { assistantInfoType } from "@/components/assistant-info";
import { useAssistantStore } from "@/store/modules/assistant";
const assistantStore = useAssistantStore();
onMounted(() => {
    console.log(111);
});
// 组件 props类型定义
interface componentProps {
    assistantInfos: assistantInfoType; // 助教信息
    buttonText?: string; // 下单按钮文字，默认“立即下单”
    isshowCheck?: boolean; // 是否显示左上角单选按钮
    isshowPreview?: boolean; // 是否启用图片预览
    checked?: boolean; //
}

// 定义并设置 props 默认值
const props = withDefaults(defineProps<componentProps>(), {
    assistantInfos: () => ({} as assistantInfoType),
    buttonText: "立即下单",
    isshowCheck: false,
    isshowPreview: false,
    checked: false,
});

// 事件定义
const emit = defineEmits<{
    (e: "click-card"): void; // 点击卡片
    (e: "click-order"): void; // 点击下单按钮
    (e: "select-change", data: boolean): void; // 复选框选择状态改变
}>();

// 处理头像兜底
const avatarFinal = computed(
    () => props.assistantInfos.image || "/static/111.jpg"
);
// const avatarFinal = computed(() =>  '/static/111.jpg')
const gender = computed(() =>
    props.assistantInfos.gender == 1 ? "female" : "male"
);

type StatusKey = "outline" | "online" | "busy";

const STATUS_KEYS: readonly StatusKey[] = ["outline", "online", "busy"];

const isStatusKey = (value: string): value is StatusKey =>
    STATUS_KEYS.includes(value as StatusKey);

// 助教状态文本映射
const STATUS_TEXT_MAP: Record<StatusKey, string> = {
    outline: "离线",
    online: "在线",
    busy: "忙碌",
};

// 助教状态编码映射（0 离线｜1 在线｜2 忙碌）
const STATUS_CODE_MAP: Record<number, StatusKey> = {
    0: "outline",
    1: "online",
    2: "busy",
};

// 统一归一化状态，兼容数字与字符串
const normalizedStatus = computed<StatusKey>(() => {
    const rawStatus = props.assistantInfos.status;
    if (rawStatus === undefined || rawStatus === null) return "outline";

    if (typeof rawStatus === "number") {
        return STATUS_CODE_MAP[rawStatus] ?? "outline";
    }

    const statusStr = `${rawStatus}`.trim();
    if (isStatusKey(statusStr)) {
        return statusStr;
    }

    const statusNum = Number(statusStr);
    if (!Number.isNaN(statusNum)) {
        return STATUS_CODE_MAP[statusNum] ?? "outline";
    }

    return "outline";
});

const statusText = computed(() => STATUS_TEXT_MAP[normalizedStatus.value]);

// 在线状态样式类名
const getStatusClass = computed(() => {
    return `dotStatus_${normalizedStatus.value}`;
});

// 下单按钮样式类名
const getTextStatusClass = computed(() => {
    return normalizedStatus.value === "online"
        ? "order_online"
        : "order_no_online";
});

// 距离显示：若为数字则拼接 km，若已带单位则直出
const distanceLabel = computed(() => {
    const d = props.assistantInfos.distance;
    if (d === undefined || d === null || d === "") return "";
    if (typeof d === "number") return `${d}km`;
    // 已包含单位时直接返回
    return /km$/i.test(d) ? d : `${d}km`;
});

// 点击单选按钮
const handleSelect = (val: boolean) => {
    emit("select-change", val);
};

// 点击卡片
function onCardTap() {
    assistantStore.setCurrentAssistant(props.assistantInfos);
    if (props.isshowPreview) {
        uni.navigateTo({
            url: `/pages/videoImagePlay/videoImagePlay?assistantId=${props.assistantInfos.id}`,
            animationType: "fade-in",
            animationDuration: 200,
        });
    } else {
        emit("click-card");
    }
}

// 点击下单按钮
function onOrderTap() {
    if (props.assistantInfos.status === 1) {
        // console.log("去下单，跳转下单页面");
        emit("click-order");
    } else if (props.assistantInfos.status === 0) {
        uni.showToast({
            title: "该助教离线无法下单！",
            icon: "none",
            duration: 2000,
        });
    } else {
        uni.showToast({
            title: "该助教忙碌无法下单！",
            icon: "none",
            duration: 2000,
        });
    }
    // emit('click-order', props.assistantInfos)
}
</script>

<style lang="less" scoped>
// 纵向卡片尺寸（可按需覆盖）：
// - 宽度 335rpx 左右便于两列排布
// - 也可通过外层容器控制自适应

.checkbox {
    position: absolute;
    z-index: 9999;
    left: 23rpx;
    top: 21rpx;
}

.assistant-card {
    position: relative;
    width: 335rpx;
    height: 430rpx;
    border-radius: 24rpx;
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

    .cover {
        width: 100%;
        height: 100%;
        display: block;
    }

    // 顶部在线状态
    .status-badge {
        width: 106rpx;
        height: 34rpx;
        box-sizing: border-box;
        position: absolute;
        top: 19rpx;
        right: 19rpx;
        padding: 0 14rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        gap: 8rpx;
        color: #fff;
        font-size: 19rpx;
        /* 磨砂玻璃核心效果 */
        background: rgba(154, 154, 155, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(10px);

        .dot {
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            background-size: 100% 100%;
            opacity: 1;
        }

        .dotStatus_online {
            background-image: url(/static/images/home/right_tag_online.png);
        }

        .dotStatus_outline {
            background-image: url(/static/images/home/right_tag_outline.png);
        }

        .dotStatus_busy {
            background-image: url(/static/images/home/right_tag_busy.png);
        }

        &.offline {
            background: rgba(153, 153, 153, 0.95);

            .dot {
                background: #fff;
                opacity: 0.8;
            }
        }
    }

    // 底部信息渐变蒙层
    .info-wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 96rpx;
        padding: 20rpx 20rpx 34rpx 20rpx;
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.55) 48%,
                rgba(0, 0, 0, 0.75) 100%);
        color: #fff;

        .row {
            display: flex;
            align-items: center;
        }

        .meta {
            justify-content: space-between;
            font-size: 19rpx;
            color: rgba(255, 255, 255, 0.95);

            .meta-item {
                letter-spacing: 0rpx;

                .unit {
                    opacity: 0.9;
                    font-size: 19rpx;
                }
            }

            .meta-right {
                display: flex;
                align-items: center;
                gap: 8rpx;

                .loc-dot {
                    // font-size: 28rpx;
                    // opacity: 0.8;
                    width: 19rpx;
                    height: 19rpx;
                    overflow: hidden;
                    background-size: 100% 100%;
                    background-image: url(/static/images/home/position.png);
                }

                .distance {
                    font-size: 22rpx;
                }
            }
        }

        .bottom {
            margin-top: 14rpx;
            justify-content: space-between;
            height: 50rpx;

            .name-wrap {
                width: 114rpx;
                display: flex;
                align-items: center;
                // justify-content: space-between;
            }

            .name {
                width: 60rpx;
                height: 50rpx;
                line-height: 50rpx;
                font-weight: 600;
                font-size: 25rpx;
                color: #fff;
            }

            .ellipsis {
                overflow: hidden;
                white-space: nowrap;
                // text-overflow: ellipsis;
            }

            .tag {
                width: 21rpx;
                height: 21rpx;
                background-size: 100% 100%;
            }

            .female {
                background-image: url(/static/images/home/female.png);
            }

            .male {
                background-image: url(/static/images/home/female.png);
            }

            .order-btn {
                margin-left: 12rpx;
                width: 167rpx;
                height: 50rpx;
                box-sizing: border-box;
                // background-image: url(/static/images/home/order_img.png);
                // background-size: 100% 100%;
                border-radius: 58rpx 58rpx 58rpx 58rpx;
                text-align: center;
                line-height: 50rpx;
                font-weight: 500;
                font-size: 25rpx;
            }

            .order_online {
                background: linear-gradient(48deg,
                        #07ebfd 0%,
                        #00ead9 23%,
                        #00e9bf 77%,
                        #00e9a3 100%);
                color: #000;
            }

            .order_no_online {
                background: #aaa;
                color: #fff;
            }
        }
    }
}

/* 横向条目（如到店门店卡片）备用样式：
   可将外层容器设置 .assistant-horizontal 以复用宽高等规则
*/
.assistant-horizontal {
    width: 688rpx;
    height: 173rpx;
    background: #ffffff;
    border-radius: 23rpx;
}
</style>
